<template>
  <pageTabelLayout v-loading="pageData.loadingUp">
    <template #pageHeader>
      <div class="search-form isheader" v-show="pageData.headerShow">
        <a-form size="small" :model="form" layout="inline">
          <!-- <a-form-item label="公司">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="form.companyName"
            />
          </a-form-item> -->
          <CorporateSectorCascader
            :configCascader="configCascader"
            @changeCascader="changeCascader"
          />
          <a-form-item label="物料编号">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="form.materialCode"
            />
          </a-form-item>
          <a-form-item label="固定资产编号">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="form.numberId"
            />
          </a-form-item>
          <a-form-item label="物料名称">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="form.materialName"
            />
          </a-form-item>
          <a-form-item label="位置号">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="form.floorDistrict"
            />
          </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="pageData.headerShow"
            @click="pageData.headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down
            v-else
            @click="pageData.headerShow = true"
            :strokeWidth="2"
            :size="18"
          />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          <el-button plain :icon="CirclePlus" @click="edit()">分摊设置</el-button>
          <el-button plain :icon="CirclePlus" @click="edit1()">区域设置</el-button>
          <el-button :icon="Printer" plain @click="printInStock">打印</el-button>
        </a-space>
      </div>
    </template>
    <!-- <div style="background-color: #f0f2f5; height: 10px"></div> -->
    <template #pageTabel>
      <encapsulation-agrid ref="refgridOption" :configaggrid="configaggrid"></encapsulation-agrid>
    </template>
    <a-drawer
      ok-text="保存"
      cancel-text="关闭"
      :drawer-style="{ zIndex: 9999 }"
      :width="400"
      :visible="pageData.showAdd"
      unmountOnClose
      @ok="save"
      @cancel="pageData.showAdd = false"
    >
      <template #title> 分摊设置</template>
      <div v-loading="pageData.loadingUp2">
        <a-form ref="formRef" layout="horizontal" :model="dataForm">
          <a-form-item
            label="分摊年限"
            label-col-flex="80px"
            :rules="[{ required: true, message: '分摊年限必选' }]"
          >
            <a-input-number
              @change="changeNum"
              allow-clear
              :style="{ width: '300px' }"
              class="bacClass"
              v-model="dataForm.shareYears"
            />
          </a-form-item>
          <a-form-item
            label="分摊类型"
            label-col-flex="80px"
            :rules="[{ required: true, message: '分摊类型必选' }]"
            allow-search
          >
            <a-select
              popup-container="html"
              class="bacClass"
              style="width: 300px"
              v-model="dataForm.shareType"
              allow-clear
            >
              <a-option
                v-for="(item, index) in pageData.ShareList"
                :value="item.detailName"
                :key="index"
              >
                {{ item.detailName }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>
    <a-drawer
      ok-text="保存"
      cancel-text="关闭"
      :drawer-style="{ zIndex: 9999 }"
      :width="400"
      :visible="pageData.showAdd1"
      unmountOnClose
      @ok="save1"
      @cancel="pageData.showAdd1 = false"
    >
      <template #title> 区域设置</template>
      <div v-loading="pageData.loadingUp2">
        <a-form ref="formRef" layout="horizontal" :model="dataForm">
          <a-form-item
            label="所属区域"
            label-col-flex="80px"
            :rules="[{ required: true, message: '所属区域必选' }]"
          >
            <a-select
              popup-container="html"
              class="bacClass"
              style="width: 300px"
              v-model="dataForm.districtId"
              allow-clear
              allow-search
            >
              <a-option v-for="(item, index) in pageData.regionList" :value="item.id" :key="index">
                {{ item.areaName }}
              </a-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="位置号"
            label-col-flex="80px"
            :rules="[{ required: true, message: '位置号必选' }]"
          >
            <a-select
              popup-container="html"
              class="bacClass"
              style="width: 300px"
              v-model="dataForm.floorDistrict"
              allow-clear
              allow-search
            >
              <a-option
                v-for="(item, index) in pageData.positionList"
                :value="item.locationMark"
                :key="index"
              >
                {{ item.locationMark }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>
    <el-dialog v-model="pageData.dialogVisible" title="打印二维码" width="450px">
      <span class="dialog-footer">
        <el-button @click="printTbaleclick">打印</el-button>
        <el-button type="primary" @click="pageData.dialogVisible = false"> 取消 </el-button>
      </span>
      <div id="printContainer">
        <div id="printTbale" v-for="(item, index) in pageData.printList" :key="index">
          <QrcodeVue
            style="width: 50px; height: 50px; margin-left: 5px; margin-top: 10px"
            :value="item.numberId"
          ></QrcodeVue>
          <div class="textContainer">
            <div
              >编号：<span style="zoom: 0.7">{{ item.numberId }}</span></div
            >
            <div style="margin-top: 10px"
              >名称：<span style="zoom: 0.7">{{ item.materialName }}</span></div
            >
            <div style="margin-top: 10px">
              规格：<span style="zoom: 0.7">{{ item.specification }}</span></div
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </pageTabelLayout>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted, nextTick } from 'vue'
  // 引入element提示
  import { ElMessage, ElMessageBox } from 'element-plus'
  //引入封装post
  import { get, post } from '@/api/http'
  import { tableColumns } from './DeviceInitialization'
  import buttionRender from '@/components/aggridCellRenDerer/buttionRender.vue'
  import CorporateSectorCascader from '@/components/corporateSectorCascader1/index.vue'
  import printJS from 'print-js'
  import QrcodeVue from 'qrcode.vue'

  import { Search, Delete, Printer } from '@element-plus/icons-vue'

  let dataForm = reactive<any>({
    shareType: '',
    shareYears: '',
    districtId: '',
    floorDistrict: '',
  })
  let pageData = reactive<any>({
    showAdd: false,
    showAdd1: false,
    type: '',
    loadingUp: false,
    headerShow: true,
    id: '',
    dialogVisible: false,
    printList: [],
    ShareList: [], //分摊类型
    selecteShareList: [], //勾选分摊数据
    selecteRegionList: [], //勾选区域数据
    regionList: [], //下拉框区域数据
    positionList: [], //下拉框位置号数据
  })
  let query = reactive<any>({
    companyName: '',
    companyID: '',
    numberId: '',
    materialName: '',
    propertyType: '',
    subCategory: '',
    district: '',
    shareYears: '',
    shareType: '',
    joinFactoryTime: '',
    price: Number,
    majorCategory: '',
  })
  const printTbaleclick = () => {
    printJS({
      printable: 'printContainer',
      type: 'html',
      targetStyles: ['*'],
    })
  }
  const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '公司', //公司label
    cascaderShow: 'sector', //配置部门不显示
  })
  const changeCascader = (data: any) => {
    const { corporateId, corporateLabel } = data
    // form.companyName = corporateLabel
    form.companyId = corporateId
  }
  const cascaderRef1 = ref()

  const configCascader1 = ref<{}>({
    corporateWidth: '67%', //公司宽度
    size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '公司', //公司label
    cascaderShow: 'sector', //配置部门不显示
    corporateRquired: true,
    corporateNameLabelWidth: '78px',
  })
  const changeCascader1 = (data: any) => {
    const { corporateId, corporateLabel } = data
    query.companyName = corporateLabel
    query.companyID = corporateId
  }
  let form = reactive<any>({
    companyId: '',
    numberId: '',
    materialCode: '',
    materialName: '',
    floorDistrict: '',
    stockState: 1,
  })
  let refgridOption = ref<any>()
  let configaggrid = ref({
    url: 'wms/ironwareStockInfo/getPage', //接口路径
    queryData: {
      companyID: '',
      numberId: '',
    },
    paginationShow: true, //分页是否显示
    invokeiIterface: true, //是否调用接口
    rowMultiSelectWithClick: true, //点击行是否多选
    column: tableColumns,
    fileName: 'DeviceInitialization-1',
  })
  onMounted(() => {
    getList()
  })
  const getList = () => {
    refgridOption.value.setQuery(form)
  }
  const printInStock = () => {
    const selectedData = refgridOption.value.getSelectedRows()
    if (selectedData.length == 0) {
      ElMessage.warning('请勾选您要打印的单据')
      return
    }
    pageData.printList = selectedData
    pageData.dialogVisible = true
  }
  const edit = () => {
    getShareList()
    const selectedData = refgridOption.value.getSelectedRows()
    if (selectedData.length == 0) {
      ElMessage.warning('请勾选您要修改的单据')
      return
    }
    dataForm.shareYears = ''
    dataForm.shareType = ''
    pageData.selecteShareList = selectedData
    pageData.showAdd = true
    nextTick(() => {})
  }
  const edit1 = async () => {
    const selectedData = refgridOption.value.getSelectedRows()
    if (selectedData.length == 0) {
      ElMessage.warning('请勾选您要修改的单据')
      return
    } else if (selectedData.length > 1) {
      ElMessage.warning('只能勾选一条数据')
      return
    }
    pageData.selecteRegionList = selectedData
    await getRegionList()
    await getfloorDistrictList()
    dataForm.districtId = pageData.regionList.find(
      (item: any) => item.areaName == selectedData[0].district
    )['id']
    dataForm.floorDistrict = selectedData[0].floorDistrict
  }
  const save = async () => {
    if (!dataForm.shareYears) {
      ElMessage.warning('分摊年限必选')
      return
    }
    if (!dataForm.shareType) {
      ElMessage.warning('分摊类型必选')
      return
    }
    console.log(pageData.selecteShareList)
    let pam = pageData.selecteShareList.map((item: any) => {
      return {
        numberId: item.numberId,
        shareType: dataForm.shareType,
        shareYears: dataForm.shareYears,
      }
    })
    try {
      pageData.loading = true
      const res = await post({
        url: 'wms/ironwareStockInfo/updateShareType',
        data: pam,
      })
      if (res.code == 200) {
        pageData.corporateList = res.data
        getList()
        ElMessage.success('修改完成')
        pageData.showAdd = false
        return
      }
      ElMessage.error(res.message)
    } catch (error: any) {
      pageData.loading = false
    } finally {
      pageData.loading = false
    }
  }
  const save1 = async () => {
    if (!dataForm.districtId) {
      ElMessage.warning('所属区域必选')
      return
    }
    if (!dataForm.floorDistrict) {
      ElMessage.warning('位置号必选')
      return
    }

    console.log(pageData.selecteRegionList)
    const obj = pageData.regionList.find((item: any) => item.id == dataForm.districtId)
    console.log(obj)
    let pam = pageData.selecteRegionList.map((item: any) => {
      return {
        numberId: item.numberId,
        districtId: dataForm.districtId,
        district: obj.areaName,
        floorDistrict: dataForm.floorDistrict,
      }
    })
    try {
      pageData.loading = true
      const res = await post({
        url: 'wms/ironwareStockInfo/updateMachineArea ',
        data: pam,
      })
      if (res.code == 200) {
        pageData.corporateList = res.data
        getList()
        ElMessage.success('修改完成')
        pageData.showAdd1 = false
        return
      }
      ElMessage.error(res.message)
    } catch (error: any) {
      pageData.loading = false
    } finally {
      pageData.loading = false
    }
  }
  const getShareList = async () => {
    pageData.loading = true
    try {
      const res = await post({
        url: `dict/dictTypeDetail/getListByCodeType?codeType=51`,
      })
      if (res.code === 200) {
        pageData.ShareList = res.data
      }
    } catch (e) {
      console.log(e)
    } finally {
      pageData.loading = false
    }
  }
  const getRegionList = () => {
    pageData.loading = true
    post({
      url: 'planSingle/machineArea/getMachineAreaPara',
      data: { firmId: pageData.selecteRegionList[0].companyId, deleteState: 0 },
    })
      .then(({ code, data }) => {
        if (code === 200) {
          pageData.regionList = data
          nextTick(() => {})
          pageData.showAdd1 = true
        }
        pageData.loading = false
      })
      .catch(() => {
        pageData.loading = false
      })
  }
  const getfloorDistrictList = async () => {
    pageData.loading = true
    try {
      const res = await post({
        url: 'planSingle/LocationMarkSet/select',
        data: { deleteState: 0 },
      })
      if (res.code === 200) {
        pageData.positionList = res.data
      }
    } catch (error) {
      console.log(error)
    } finally {
      pageData.loading = false
    }
  }
  const changeNum = () => {
    dataForm.shareYears = parseInt(dataForm.shareYears, 10)
  }
</script>
<script lang="ts">
  export default defineComponent({
    name: 'DeviceTypeAllocationSettings',
  })
</script>
<style scoped>
  .contioner {
    height: 100%;
  }

  .contentPrint {
    width: 100%;
    display: flex;
    justify-content: space-between;

    color: #000 !important;
  }

  .printLeft {
    width: 56%;
  }

  .printTitle {
    font-size: 22px;
    font-weight: 700;
    margin-top: 20px;
  }

  .printRight {
    width: 43%;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  }

  .ermPrint {
    display: flex;
    justify-content: center;
    /* flex-flow: column wrap; */
    align-items: center;
  }

  .erm {
    width: 160px;
    height: 50px;
    background: #999;
  }

  .formPrint {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  }

  .ban {
    width: 50%;
    margin-bottom: 5px;
  }

  .quan {
    width: 100%;
    margin-bottom: 5px;
  }

  table {
    text-align: center;
    color: #000;
  }

  td {
    color: #000;
  }

  th {
    color: #000;
  }

  .tablePrint {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    flex-flow: row wrap;
  }

  .footerPrint {
    display: flex;
    justify-content: space-around;
    margin-top: 8px;
    color: #000;
  }

  .createTime {
    width: 100px;
  }

  .printw {
    width: 30%;
    margin-bottom: 5px;
  }

  :deep(.el-dialog__body) {
    color: #000;
  }

  .my-tool-bar {
    /* background:#fff; */
    margin: 5px 0 5px 0;
  }

  .c-header {
    background: #fff;
    padding: 15px 0 10px 0;
  }

  :deep(.el-input__inner) {
    color: #3b3a3a;
  }

  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #474849 inset;
  }

  :deep(.el-form-item__label) {
    color: #202021;
  }

  :deep(.arco-drawer-container) {
    z-index: 1000 !important;
  }

  #printTbale {
    width: 4.8cm;
    height: 2.8cm;
    display: flex;
    border: 1px solid #000;
    margin-top: 0.2cm !important;
    page-break-before: always;
  }

  #printContainer {
    width: 10cm;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    margin-left: 0.1cm;
  }

  .textContainer {
    margin-top: 10px;
    margin-left: 5px;
    height: 1.8cm;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .textContainer > div {
    font-size: 12px;
    zoom: 0.7;
    width: 4.5cm;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
